<template>
    <el-dialog :title="detailData.plateNo" :visible.sync="outerVisible" width="1000px">
        <div class="flex flex-direction ">
            <div v-loading="detailLoading" class="flex">
                <div class="flex-sub margin-right flex flex-direction">
<!--                    <el-button>切换</el-button>-->
                    <div v-if="!wja" style="width: 150px; z-index: 999; text-align: right; position: absolute; right: 20px; top: 73px;">
                        <el-button size="mini" type="primary" icon="el-icon-arrow-left"
                                   @click="getParentDetails(indexs -1)">
                            上一条
                        </el-button>
                        <el-button size="mini" type="primary"
                                   @click="getParentDetails(indexs +1)">
                            下一条<i class="el-icon-arrow-right el-icon--right" />
                        </el-button>
                    </div>
                    <vehicle-info :test="test" :sta="this.sta" />

                </div>
                <vehicle-media :detail-data="test" style="width: 50%;" />
            </div>

            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData" size="mini"
                      header-cell-class-name="table-header" style="width: 100%; margin-top: -15px;" max-height="200">
                <el-table-column label="车牌号码" width="100" prop="plateNo" />
                <el-table-column label="检测时间" width="200">
                    <template slot-scope="scope">
                        {{ moment(scope.row.gmtWeighOn).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="车货总重（kg）" width="120" prop="entranceWeight" />
                <el-table-column label="限载量（kg）" width="120" prop="limitWeight" />
                <el-table-column label="初检超载量（kg）" width="120" prop="overWeight" />
                <el-table-column label="本次检测重量（kg）" width="140" prop="currentWeight" />
<!--                <el-table-column v-if="statuss" label="当前超载总重（kg）" width="140" prop="currentOverWeight" />-->
                <el-table-column label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看详情</el-button>
                        <!--                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.$index)">查看详情</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>

<script>
import moment from 'moment';
import VehicleInfo from '@/modules/components/VehicleDetail/vehicle-info';
import VehicleMedia from '@/modules/components/VehicleDetail/vehicle-media';
import {GetArchiveInformation,GetArchiveInformationHistory} from '@/api/parkUnloadApi';
export default {
    name: 'VehicleDetail',
    components: {
        VehicleInfo,
        VehicleMedia,
    },
    props: {
        wja: String,
        sta: String,
        oid: Number,
        tid: Number,
        // row
        initDetailData: Object,
        // 当前选中列在数据中的下标值
        indexs: Number,
        // 当前返回list的条数
        tableSize: Number,
        // 当前页
        currentPage: Number,
        // 当前查询的数据的总条数(分页的总数)
        total: Number,
        // cs,fs,qt
        step: String,
        wjaType: String
    },
    data() {
        return {
            statuss: true,
            car_no: '',
            lianDisable: false,
            lian: '立案',
            isLa: false,
            test:{
                entranceWeight : '',
                limitWeight: '',
                currentOverWeight: '',
                overWeight: '',
                current_weight :'',
                gmtWeighOn: '',
                currentLength: '',
                currentWidth: '',
                currentHeight: '',
                vehicleImage1: '',
                vehicleImage2: '',
                vehicleImage3: '',
            },
            showAddTab: {
                overrunActionProof: true
                /* InquiryRecord : false,
                    SurveyReportCompany : false,
                    placedCaseTableCompany : false,
                    IllegalActNoticeCompany : false,
                    serviceReturnReceiptCompanyIAN : false,
                    OnSitePunishment : false,
                    OrderCorrectionNoticeCompany : false,
                    closeReportCompany : false,
                    CoverCompany : false,*/
            },
            showEditTab: {
                overrunActionProof: true,
                InquiryRecord: true,
                SurveyReportCompany: true,
                placedCaseTableCompany: true,
                IllegalActNoticeCompany: true,
                serviceReturnReceiptCompanyIAN: true,
                OnSitePunishment: true,
                OrderCorrectionNoticeCompany: true,
                closeReportCompany: true,
                CoverCompany: true
            },
            src: '',
            zfyys: [],
            zfyy: false,
            dialogCaseInfoVisible: false,
            information: {},
            isIllegal: '',
            illegalType: {
                zdhp: false,
                jp: false,
                tp: false,
                yx: false
            },
            invalidReasonFlag: false,
            outerVisible: false,
            tableData: [],
            totalCount: 0,
            isLoading: false,
            queryParams: {},
            detailLoading: false,
            localVehicleDetail: null,
            mediaTab: 'img',
            Invalid_reason_list: '',
            Invalid_reason_remark: '',
            invalidReasons: [],
            invalidReasonsResult: [],
            invalidReasonRemark: '',
            // 地图组件显示控制
            mapDialogVisible: false,
            mapTitle: '',
            plateInfo: {
                plate_no: '',
                plate_color: ''
            },
            drawTrack: false,
            // 蒙牌识别组件显示控制
            maskDialogVisible: false,
            crossing_id: '',
            plateNo: '',
            timer: ''
        };
    },
    computed: {
        images() {
            let images = this.detailData.image_path;
            if (images) {
                return images.split(',');
            }
            return [];
        },
        detailData() {
            return this.localVehicleDetail || this.initDetailData;
        },
        isDisabled() {
            var flag = this.step == 'qt';
            if (this.detailData.InquiryResult && this.detailData.InquiryResult.second_autit_result) {
                flag = true;
            }
            return flag;
        }
    },
    watch: {
        initDetailData(newValue, oldValue) {
            this.localVehicleDetail = null;
            this.initForm();
        },
        oid(newValue, oldValue){
            this.localVehicleDetail = null;
            this.initForm();
        }

    },
    mounted() {
        // debugger
        this.initForm();
    },
    methods: {
        initForm() {
            // debugger;
            let params = {};
            if (this.sta === "违法认定") {
                if (this.oid !==0){
                    params = {
                        entranceId: this.oid,
                    };
                }
                if (this.tid !==0){
                    params = {
                        entranceId: this.tid,
                    };
                }

                console.log(this.oid);
                console.log(this.tid);
                GetArchiveInformation(params).then(res => {

                    this.tableData = res.res.GetArchiveInformation;
                    // debugger;
                    if (this.tableData.length > 0){
                        this.test = this.tableData[0];
                    }else {
                        this.test = {}
                    }

                    console.log("数组");
                    console.log(this.tableData);
                    console.log(this.test);
                }).catch(err => {
                    // this.isLoading = false;
                    console.log(err);
                });
            }

            if (this.sta ==="历史档案"){
                this.statuss = false;
                if (this.oid !==0){
                    params = {
                        entranceId: this.oid,
                    };
                }
                if (this.tid !==0){
                    params = {
                        entranceId: this.tid,
                    };
                }

                console.log(this.oid);
                console.log(this.tid);
                GetArchiveInformationHistory(params).then(res => {

                    this.tableData = res.res.GetArchiveInformationHistory;
                    // debugger;
                    if (this.tableData.length > 0){
                        this.test = this.tableData[0];
                        this.test.sta = this.sta;
                    }else {
                        this.test = {}
                    }

                    console.log("数组");
                    console.log(this.tableData);
                    console.log(this.test);
                }).catch(err => {
                    // this.isLoading = false;
                    console.log(err);
                });
            }

        },
        handleDialogClosed() {

        },
        clicked() {
            this.src = GlobalConfig.reportBaseurl + 'overrun/GRBB/reportGenerate.aspx?Where=WHERE process_id=' + this.process_id + '&ReportName=overrunActionProof';
        },
        kaz() {
            this.$message({
                type: 'warning',
                message: '暂未开放'
            });
        },

        locationInfoClose() {
            this.$refs.locationObj.destory();
        },

        establishingCase() {
            if (this.clickTooFast()) return;
            this.timer = new Date().getTime();
            if (!this.isLa) {
                this.$message({
                    type: 'warning',
                    message: '请保存复审信息!'
                });
                return false;
            }
            this.information = {
                process_id: this.detailData.process_id,
                pass_time: moment(this.detailData.pass_time).format('YYYY-MM-DD HH:mm:ss'),
                plato_no: this.detailData.plate_no
            };
            this.dialogCaseInfoVisible = true;
        },
        cancelEstablishingCase() {
            SelectBasicInformation({process_id: this.detailData.process_id}).then(res => {
                console.log('SelectBasicInformation', res);
                if (res.res.SelectBasicInformation.length > 0) {
                    this.lian = '已立案';
                    this.lianDisable = true;
                }
            }).catch(err => {
                console.log(err);
            });
            this.dialogCaseInfoVisible = false;

        },
        returnInvalidReason(result) {
            this.Invalid_reason_list = result.invalidReasonsResult;
            this.Invalid_reason_remark = result.invalidReasonRemark;
            this.invalidReasonFlag = false;
        },

        getParentDetails(index) {
            console.log(index);
            if (index < 0) {
                if (this.currentPage == 1) {
                    this.$message({
                        message: '已是第一条',
                        type: 'warning'
                    });
                    return false;
                } else {
                    this.$emit('getList', this.currentPage - 1);
                    index = 0;
                    setTimeout(() => {
                        this.$emit('handleViews', index);
                    }, 1000);
                }
            }
            if (this.tableSize == index) {

                if (((this.currentPage - 1) * 20 + index + 1) > this.total) {
                    this.$message({
                        message: '已是最后一条',
                        type: 'warning'
                    });
                    return false;
                } else {
                    this.$emit('getList', this.currentPage + 1);
                    index = 0;
                    setTimeout(() => {
                        this.$emit('handleViews', index);
                    }, 1000);
                    return false;
                }
            }
            this.$emit('handleViews', index);
        },
        moment,
        show() {
            this.outerVisible = true;
        },
        handleCurrentChange(val) {
            this.queryParams.CurrentPage = val;
            this.loadRemoteData();
        },
        handleTabClick() {
            this.queryParams.CurrentPage = 1;
            this.loadRemoteData();
        },
        handleView(item) {
            this.detailLoading = true;
            setTimeout(() => {
                // this.localVehicleDetail = item;
                this.test = item;
                this.detailLoading = false;
            }, 100);

        },
        loadRemoteData() {
            this.isLoading = true;
            // OutOfLimitData(this.queryParams).then(res => {
            //     this.isLoading = false;
            //     this.tableData = res.res.OutOfLimitData;
            //     if (this.tableData && this.tableData.length > 0) {
            //         this.totalCount = this.tableData[0].totalCount;
            //     }
            //
            // }).catch(err => {
            //     this.isLoading = false;
            //     console.log(err);
            // });
        },
        getParentList() {
            this.$emit('getList', this.currentPage);
        }
    }
};
</script>

<style scoped>
    >>>.el-button--mini,
    >>>.el-button--mini.is-round {
        padding: 7px 5px;
    }
    >>>.el-tabs__header {
        padding: 0;
        position: relative;
        margin: 0;
    }
    /deep/
    .el-dialog__body {
        padding: 10px 20px;
    }
    /deep/
    .el-dialog__header {
        padding: 20px 20px 10px;
        border-bottom: 1px solid #dcdfe6;
    }

</style>
